<template>
  <basic-container>
    <div style="width:100%;min-height: 50px;padding-left:5px;display: inline-block;margin-bottom: 20px">
      <el-container>
        <el-container>
          <el-container>
            <el-main style="background: #fff!important">
              <div style="background:#fff;height: 50px;line-height: 50px;padding-left:5px ">
                产线模板名称：<avue-input v-model="lineName" style="width:180px;margin-right: 5px" placeholder="请输入产线模板名称" ></avue-input>
                <el-button type="primary" @click="saveRealityLineTpl">保存</el-button>
              </div>
            </el-main>
          </el-container>
        </el-container>
      </el-container>
    </div>
    <template>
      <div class="form-designer"  v-loading="saveLoading">
        <el-container style="border: #e0e0e0 solid 1px;border-top:none">
          <el-aside width="240px">
            <el-header style="z-index:100;height:50px;text-align: center;line-height: 50px;width:240px;position: absolute;background: #fff">工序</el-header>
            <div style="height:800px;margin-top:45px">
              <!--工序菜单-->
              <processMenu/>
<!--          <el-button v-for="process in pfocProcessList" @click="addProcessNode(process.processName,process.id,process.workshopSection)" style="margin: 5px 5px;width:90%" >{{process.processName}}</el-button>-->
            </div>
          </el-aside>
          <el-main class="demo" style="border-left: 1px solid #e0e0e0;">
            <avue-flow :height="800"
                       width="100%"
                       style="min-height: 800px;"
                       ref="flow"
                       :option="option"
                       v-model="flowForm">
              <template #header="{node}" >
                {{(node || {}).name}}
                <i class="el-icon-delete"  style="float: right;line-height: 30px;margin-right: 2px" @click="deleteNode(node.id)"></i>
              </template>
              <template slot-scope="{node}">
                  <el-descriptions  class="margin-top"  style="width: 100%;" title="" :column="1" size="small" border >
                      <el-descriptions-item label="工段">
                        <span>{{form[node.id+`_workshopSection`]}}</span>
                      </el-descriptions-item>
                  </el-descriptions>
              </template>
            </avue-flow>

          </el-main>
        </el-container>
      </div>
    </template>
  </basic-container>
</template>

<script>
    import {getPfocProcessList } from '@/api/pfoc/pfocprocess'
    import { saveLineTpl} from '@/api/pfoc/realityproductlinetemplate'
    import processMenu from '@/views/pfoc/pfocprocess/process-menu'

    export default {
        name: "add-line-tpl",
        components: {
          processMenu,
        },
        provide() {
          return {
            processAddThis: this
          }
        },
        data() {
            return {
                count: 0,
                flowForm:'',
                nodeCount:0,//节点下标
                form: [],//提交时数据集合
                pfocProcessList:[],//工序集合
                option: {
                    name: null,
                    nodeList: [],//工序节点集合
                    lineList: [],//工序各节点指向顺序集合
                },
                lineName:null,//产线模板名称
                saveLoading:false,//保存时遮罩开关
            };
        },
        created() {
        },
        computed: {
            nodeList () {
                return this.option.nodeList
            }

        },
        mounted() {
            this.nodeCount = this.option.nodeList.length;//初始化节点下标
            //获取工序
            this.getPfocProcessListData();

        },
        methods: {
            /**获取工序*/
            getPfocProcessListData(){
                getPfocProcessList().then(response => {
                    this.pfocProcessList=response.data.data;
                })
            },

            /**添加工序*/
            addProcessNode(name,id,workshopSection){//工序名称，工序ID
                var left = 0;
                if ((parseInt(this.nodeCount / 4))%2==0){
                  left = (this.nodeCount % 4)*300

                }else {
                  left = ((3-this.nodeCount % 4)*300)
                }
                var top = parseInt(this.nodeCount / 4)*100
                this.$refs.flow.addNode(name,id,this.nodeCount,left,top);//添加节点
                //画线
                if(this.nodeList.length>1) {
                  var t = this;
                  var index = this.nodeList.findIndex(item => item.id === "node"+t.nodeCount);
                  var from = this.nodeList[index - 1].id;
                  var to = this.nodeList[index].id;
                  this.$nextTick((function() {
                    this.$refs.flow.drawLines({"from": from, "to": to})
                  }));
                }
              this.$set(this.form, "node"+this.nodeCount + "_processName", name);//注册动态节点-当前工序名称
              this.$set(this.form, "node"+this.nodeCount + "_processId", id);//注册动态节点-当前工序ID
              this.$set(this.form, "node"+this.nodeCount + "_workshopSection",workshopSection);//注册动态节点-工段
              this.nodeCount=this.nodeCount+1;//更新节点下标
            },
            /**删除工序*/
            deleteNode(id){
                var t = this;
                this.$confirm("确定要删除节点" + id + "?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    closeOnClickModal: !1
                }).then((function() {
                    t.$refs.flow.deleteNode(id);
                    t.option.nodeList = t.option.nodeList;
                    t.$delete(t.form, id + "_processName");//删除动态节点-当前工序名称
                    t.$delete(t.form, id + "_processId");//删除动态节点-当前工序ID
                    t.$delete(t.form, id + "_workshopSection");//删除动态节点-工段
                })).catch((function() {}))
            },
            /**保存产线*/
            saveRealityLineTpl(){

                if(this.validatenull(this.lineName)){
                    this.$message.warning("产线模板名称不能为空。")
                    return;
                }
                if(this.validatenull(this.option.nodeList)){
                    this.$message.warning("请选择工序制定产线模板。")
                    return;
                }
                //组装需要提交的数据
                var params = {};//参数集合
                params.lineName = this.lineName;//产线模板名称
                params.processNodes = JSON.stringify(this.option.nodeList);//工序节点集合（其中mark字段为工序ID）
                params.processNodeLine = JSON.stringify(this.option.lineList);//工序各节点指向顺序集合

                this.saveLoading=true;
                //提交
                saveLineTpl(params).then(response => {
                    if(response.data.data=="1") {
                        this.$message.warning(
                            {
                                message: "新增产线模板失败，产线：【"+this.lineName+"】已存在，已勿重复添加。",
                                duration: 5000 // 设置时长为5秒
                            });
                        this.saveLoading = false;
                    }else{
                        this.$message.success("产线模板添加成功。")
                        this.saveLoading = false;
                        this.$emit('closeTplAdd');//关闭新增页面
                    }
                }).catch(() => {
                    this.saveLoading = false;
                });
            },

        }
    };
</script>

<style scoped>
  /deep/.avue-flow__node{
    height: auto!important;
  }
  /deep/ .avue-flow__node-header {
    line-height: 30px;
  }
  /deep/.el-descriptions__title {
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
  }


  /*以下样式是打印的时候avue表格错乱修正方式（主要是序号列和操作列固定影响的）*/
  /deep/.el-table__fixed{
    display: none!important;
  }
  /deep/.el-table__fixed-right{
    display: none!important;
  }
  /deep/.el-table__cell.is-hidden>*{visibility:visible !important;}

  /deep/ .avue-grid{
    display: none!important;
  }
  /deep/.el-main{
    background:#fff !important;
  }
  /deep/.el-card__body{
    padding: 0px!important;
  }
  /*去掉滚动条样式*/
  .demo::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .demo {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
